<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Col :span="5">
              <Button @click="getList" icon="md-refresh" style="margin-right:10px">刷新</Button>
            </Col>
            <Col :span="19">
              <Form ref="searchForm" inline :model="searchForm" :label-width="100">
                
                <FormItem label="提现人">
                  <Input v-model="searchForm.withdrawUser" clearable placeholder="请输入提现人" />
                </FormItem>
                <FormItem label="提现人手机号" prop="mobile">
                  <Input v-model="searchForm.mobile" clearable placeholder="请输入提现人手机号" />
                </FormItem>
                <FormItem label="审核状态" prop="type">
                  <Select v-model="searchForm.type" style="width:180px" clearable>
                    <Option value="-1">待审核</Option>
                    <Option value="0">不同意</Option>
                    <Option value="1">同意</Option>
                  </Select>
                </FormItem>
                <Form-item style="margin-left:-40px">
                  <!-- <Button type="default" @click="clearIpt" style="margin-right:10px">清空</Button> -->
                  <Button type="primary" @click="handleSearch" style="margin-right:10px">搜索</Button>
                </Form-item>
              </Form>
            </Col>
          </Row>

          <Row>
            <Table :loading="loading" border :columns="commodityColumns" :data="commodityData" ref="table" sortable="custom" @on-sort-change="changeSort"></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="pageTotal" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal title="审核" v-model="modalVisible" :mask-closable='false' :width="600">
      <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >
        <FormItem label="审核意见" prop="content">
          <Input v-model="form.content" style="width: 100%" type="textarea" />
        </FormItem>
        <FormItem label="审核状态" prop="type">
          <Select v-model="form.type" style="width:100%">
            <Option value="0">不同意</Option>
            <Option value="1">同意</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTotal: 0,
      loading: false,
      form: {
        id: "",
        content: "",
        type: ""
      },
      formValidate: {
        content: [{ required: true, message: "不能为空", trigger: "blur" }],
        type: [{ required: true, message: "不能为空", trigger: "change" }]
      },
      modalVisible: false, //模态框的显示隐藏
      commodityData: [],
      //商品显示
      commodityColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "提现人",
          key: "withdrawUser"
        },
        {
          title: "提现人手机号",
          key: "mobile"
        },  
        {
          title: "提现金额",
          key: "money"
        },      
        {
          title: "提现类型",
          key: "payTypeEnum"
        },
        {
          title: "提现账号",
          key: "withdrawNumber"
        },
        {
          title: "提现状态",
          key: "goodCategoryName",
          render: (h,params)=> {
            if (params.row.type === -1) {
                return h("span", "待审核")
            } else if (params.row.type === 0) {
                return h("span", "已拒绝")
            } else if (params.row.type === 1) {
                return h("span", "已同意")
            }
          }
        },
        {
          title: "创建时间",
          key: "createTime"
        },        
        {
          title: "操作",
          width: 100,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            if (params.row.type === -1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    on: {
                      click: () => {
                        this.check(params.row);
                      }
                    }
                  },
                  "审核"
                ),
              ]);
            } else {
              return h("span", "暂无操作")
            }
          }
        }
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        withdrawUser: "",
        mobile: "",
        // payTypeEnum: "",
        type: ""
      },
      submitLoading: false,
    };
  },
  methods: {
    clearIpt () {
      this.searchForm.withdrawUser = "";
      this.searchForm.type = "";
    },

    changeSort () {

    },
    
    // 获取商品列表
    getList() {
      if (this.searchForm.type == undefined) {
        this.searchForm.type = ""
      }
      this.loading = true;
      console.log(11111)
      this.postRequest("/withdrawDeposit/PcGetWithdrawDeposit", this.searchForm).then(res=> {
        this.loading = false
        if (res.success) {
          this.commodityData = res.result.data;
          this.pageTotal = res.result.size
        } else {
          this.commodityData = [];
          this.pageTotal = 0;
        }
      })
    },

    check (v) {
      this.form.id = v.id;
      this.modalVisible = true;
    },

    handleSubmit () {
        console.log(11111)
        this.$refs.form.validate(valid=> {
            if (valid) {
              this.submitLoading = true;
                this.postRequest("/withdrawDeposit/UpdateWithdrawDeposit", this.form).then(res=> {
                    this.submitLoading = false;
                    if (res.success) {
                        this.$refs.form.resetFields();
                        this.$Message.success("审核成功");
                        this.getList();
                        this.modalVisible = false
                    } else {
                        this.$refs.form.resetFields();
                        this.$Message.success(res.message);
                        this.getList();
                        this.modalVisible = false
                    }
                })
            }
        })
        
    },

    // 搜索商品
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.getList()
    },

    loadData(item, callback) { 
      // 异步加载树子节点数据
      var param ={
        pid:item.id
      }
      this.postRequest("/goodCategory/getGoodCategoryList",param).then(res => {
        if (res.success) {
          res.result.forEach(function(e) {
            e.title=e.title
            if (e.isParent) {
              e.loading = false;
              e.children = [];
            }
          });
          callback(res.result);
        }
      });
    },

    // 编辑商品
    edit(row) {
      console.log(row);
      this.modalVisible = true;
      this.modalType = "edit";
      this.modalTitle = "编辑商品";
      this.addForm.id = row.id;
      this.addForm.goodCategoryId = row.goodCategoryId;
      this.addForm.goodCategoryName = row.goodCategoryName;
      this.addForm.goodOldPrice = row.goodOldPrice;
      this.addForm.goodNewPrice = row.goodNewPrice;
      this.addForm.integral = row.integral;
      this.addForm.goodName = row.goodName;
      this.addForm.goodPics = row.goodPics;
    },
    // 切换页
    changePage(num) {
        this.searchForm.pageNumber = num
        this.getList()
    },
    // 切换每页显示条数
    changePageSize (num) {
        this.searchForm.pageSize = num;
        this.getList()
    },
  },
  created() {
    this.getList();
  }
};
</script>

<style>
.commodity-content {
  padding: 16px;
  background-color: #ffffff;
}
.itemInput {
  width: 160px;
}
.selected {
  width: 50%;
}
.imgModal {
  text-align: center;
}
.img {
  width: 50px;
  height: 50px;
}
.page{
        margin: 16px;
        overflow: hidden;
        text-align: right;
    }
.paygos{
  margin-top: 40px;
}
.paygo1{
  margin-top: -50px;
}
</style>